<template>
  <div>
    <!-- 实训教师管理 -->
    <el-container style="background-color: #fff">
      <el-header>
        <div class="box">
          <div class="left">
            <el-input v-model="input" placeholder=""></el-input
            ><el-button
              type="primary"
              style="margin-left: 10px"
              icon="el-icon-search"
              >查询</el-button
            ><el-button icon="el-icon-refresh-right">重置</el-button>
          </div>
          <div>
            <el-button type="primary">下载现有成绩表</el-button>
            <el-button type="primary">上传成绩表</el-button>
            <el-button type="primary">发布成绩</el-button>
            <el-button type="primary">撤回发布</el-button>
          </div>
        </div></el-header
      >
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            'font-weight': '600',
            color: '#666',
            'font-size': '14px',
            'text-align': 'center',
          }"
        >
          >
          <el-table-column prop="xh" align="center" label="序号" width="120">
          </el-table-column>
          <el-table-column
            label="人员编号"
            style="font-weight: 600"
            sortable
            align="center"
            width="120"
          >
            <template slot-scope="scope">{{ scope.row.bh }}</template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="姓名" width="120">
          </el-table-column>
          <el-table-column
            prop="emlie"
            align="center"
            label="电子邮件"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dw"
            align="center"
            label="所属单位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="qiandao"
            align="center"
            label="签到"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="qiantui"
            align="center"
            label="签退"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="cj"
            align="center"
            label="成绩"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="handleUpdate(scope.row)"
                icon="el-icon-edit"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="success"
                plain
                @click="handleDelete(scope.$index, scope.row)"
                icon="el-icon-check"
                >确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="dibu">
          <el-pagination
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
            style="margin-top: 20px"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="操作确认"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>删除操作确认</span>
      <p>确定要删除当前管理员吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加或修改用户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="培训课程名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入培训课程名称" />
        </el-form-item>
        <el-form-item label="培训类别">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训关键词" prop="age">
          <el-input v-model="form.age" placeholder="请输入培训关键词" />
        </el-form-item>

        <el-form-item label="培训时长" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训时长" />
        </el-form-item>
        <el-form-item label="培训地点" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训地点" />
        </el-form-item>
        <el-form-item label="培训时间" prop="phone">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训负责人" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训负责人" />
        </el-form-item>
        <el-form-item label="培训联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训联系电话" />
        </el-form-item>
        <el-form-item label="培训人数" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训人数" />
        </el-form-item>
        <el-form-item label="培训讲师姓名" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训讲师姓名" />
        </el-form-item>
        <el-form-item label="培训讲师联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训讲师联系电话" />
        </el-form-item>
        <el-form-item label="培训讲师介绍" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训讲师介绍" />
        </el-form-item>
        <el-form-item label="培训课程介绍" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入培训课程介绍" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["showFileName"],
  data() {
    return {
      input: "",
      dialogVisible: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      form: {},
      // 表单校验
      rules: {},
      value1:'',
      tableData: [
        {
          name: "王小虎",
          dw: "合肥学院",
          qiantui: (
            <el-link style="color:#008000;">
              ● <span style="color:#999;">已签退</span>{" "}
            </el-link>
          ),
          xh: "1",
          qiandao: <el-link style="color:#008000;">● 已签到 </el-link>,
          emlie: "XS000001@hfzjjt.com",
          cj: "成绩",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          dw: "合肥学院",
          qiantui: (
            <el-link style="color:#008000;">
              ● <span style="color:#999;">已签退</span>{" "}
            </el-link>
          ),
          xh: "2",
          qiandao: <el-link style="color:#008000;">● 已签到 </el-link>,
          emlie: "XS000001@hfzjjt.com",
          cj: "成绩",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          qiantui: (
            <el-link style="color:#008000;">
              ● <span style="color:#999;">已签退</span>{" "}
            </el-link>
          ),
          dw: "合肥学院",
          xh: "3",
          qiandao: <el-link style="color:#008000;">● 已签到 </el-link>,
          emlie: "XS000001@hfzjjt.com",
          cj: "成绩",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          qiantui: (
            <el-link style="color:#008000;">
              ● <span style="color:#999;">已签退</span>{" "}
            </el-link>
          ),
          dw: "合肥学院",
          xh: "4",
          qiandao: <el-link style="color:#008000;">● 已签到 </el-link>,
          emlie: "XS000001@hfzjjt.com",
          cj: "成绩",
          bh: "XS000001",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      // const id = row.id || this.ids;
      // getUser(id).then((response) => {
      //   this.form = response.data;
      this.open = true;
      this.title = "编辑培训课程";
      // });
    },
    cancel() {},
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    submitForm() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped >
.box,
.left {
  display: flex;
  justify-content: space-between;
}
.box {
  margin: 20px 10px;
}
/deep/.el-dialog{
  width: 800px !important;
}
.dibu {
  display: flex;
  justify-content: right;
  align-items: center;
}
</style>